<template>
	<view class="share-wrapper">
		<top-nav title="账单明细"></top-nav>
		<view class="big-input">999</view>
		<view class="info">
			USDT 转账 <view class="green"> 成功</view> <br>
			汇率：0.8762usdt
		</view>
		<view class="input">
			<view class="list">
				<view class="label">发送地址</view>
				<view class="input-content">aswljsdhigheahi11233</view>
			</view>
			<view class="list">
				<view class="label">接收地址</view>
				<view class="input-content">aswljsdhigheahi11233</view>
			</view>
			<view class="list">
				<view class="label">矿工费</view>
				<view class="input-content">0.99</view>
			</view>
			<view class="list">
				<view class="label">交易时间</view>
				<view class="input-content">2020-02-02 20:30</view>
			</view>
		</view>
		<view class="btn-wrapper">
			<view class="share">返回首页</view>
		</view>
		<u-action-sheet :list="actionSheetList" v-model="show" ></u-action-sheet>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import topNav from 'components/top-nav/top-vue.vue';
	export default{
		data(){
			return {
				value:'',
				inputClass:{
					color:'#ffffff',
					fontSize: '36rpx'
				},
				show:false,
				actionSheetList: [
					{
						text: 'AGT',
						color:'#6D6D6D'
					},
					{
						text: 'USDT',
						color:'#6D6D6D'
					},
				],
			}
		},
		components:{
			topNav:topNav
		},
		methods:{
			previewImage(){
				this.$refs.uToast.show({
					title: '点击了图片预览',
					type: 'success',
				})
				var imgArr = [];
				//预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[0]
				});

			},
			gotoPage(path){
				uni.redirectTo({
				    url: path
				});
			},
			gotoRule(path){
				uni.navigateTo({
				    url: '/pages/rule/rule'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.share-wrapper{
		.content{
			.u-image{
				margin: 0 auto;
			}
			.code{
				margin:32*2rpx auto 20*2rpx;
				width: 570rpx;
				height: 40*2rpx;
				background: rgba(105, 218, 115, 0.1);
				border-radius: 40rpx;
				border: 1px solid #69DA73;
				display:flex;
				align-items: center;
				justify-content: center;
				position:relative;
				font-size:14*2rpx;
				color:#CCCCCC;
				.icon{
					position:absolute;
					width: 15*2rpx;
					height:19*2rpx;
					background-image: url('/static/share/icon.png');
					background-size: 100% 100%;
					right:32*2rpx;
					top:50%;
					margin-top:-19rpx;
				}
				.icon1{
					width: 0;
					height: 0;
					border-left: 10rpx solid transparent;
					border-top: 12rpx solid #FFFFFF;
					border-right:10rpx solid transparent;
					position:absolute;
					right:62*2rpx;
				}
			}
		}
		.btn-wrapper{
			padding:0 20*2rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom:100rpx;
			.share{
				width: 100%;
				height: 60*2rpx;
				background: #FFB721;
				border-radius: 3*2rpx;
				display: flex;
				align-items: center;
				font-size:19*2rpx;
				justify-content: center;
			}
		}
		.big-input{
			display: flex;
			align-items: center;
			margin:30rpx 40rpx;
			font-size:48*2rpx;
			text-align:center;
			justify-content: center;
		}
		.info{
			margin: 20rpx auto;
			text-align: center;
			color: rgba(255,255,255,0.5);
			font-size:12*2rpx;
			.green{
				display:inline-block;
				color:#69DA73;
				margin-left:10rpx;
			}
		}
		.input{
			padding:0 40rpx;
			.list{
				margin-bottom:30*2rpx;
				font-size:14px;
				.label{
					font-size:14*2rpx;
					opacity: 0.5;
				}
				.input-content{
					height:100rpx;
					display:flex;
					align-items: center;
					font-size:18*2rpx;
				}
			}
		}
	}
</style>
